<template>
	<el-card shadow="hover">
		<el-row :gutter="10" class="top-block mt8 mb8">
			<el-col :span="1.5">
				<el-button @click="onOperation('add', {})" type="primary" plain icon="el-icon-plus">添加</el-button>
			</el-col>
			<right-toolbar v-model:showSearch="showSearch" @queryTable="getList" />
		</el-row>
		<el-table :data="tableList" v-loading="loading">
			<el-table-column label="ID" align="center" prop="id" />
			<el-table-column label="标签名称" align="center" prop="name" />
			<el-table-column label="排序" align="center" prop="display_order" />
			<el-table-column label="状态" align="center" prop="status">
				<template #default="scope">
					<el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" @change="onChangeStatus(scope.row)" />
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center" fixed="right">
				<template #default="{ row }">
					<el-button @click="onOperation('view', row)" type="text">查看</el-button>
					<el-button @click="onOperation('edit', row)" type="text">修改</el-button>
					<el-button @click="onDelete(row)" type="text" style="color: #f56c6c">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<pagination-component v-show="total > 0" :total="total" :page="queryParams.pageNum" :limit="queryParams.pageSize" @pagination="getList" />
		<labelOperationDialog ref="labelOperationDialogRef" />
	</el-card>
</template>

<script lang="ts">
import { onMounted, reactive, ref, toRefs } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { tagsApi } from '/@/api/admin';

import labelOperationDialog from './dailog/labelOperationDialog.vue';

const TagsApi = tagsApi();
export default {
	name: 'goodsLabel',
	components: { labelOperationDialog },
	setup() {
		const state = reactive({
			queryParams: {
				pageNum: 1,
				pageSize: 100,
			},
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			// 选中数组
			ids: [],
			showSearch: true,
			tableList: [],
			loading: false,
			total: 0,
		});

		const labelOperationDialogRef = ref(null);
		onMounted(() => {
			getList();
		});
		/********** 点击事件(on开头) **********/
		const onOperation = (type: string, row: any) => {
			(labelOperationDialogRef.value as any)?.openDialog({ type, row }, () => getList());
		};
		const onDelete = (row: any) => {
			ElMessageBox.confirm('您确定要删除此条标签?', '确认消息', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			}).then(() => {
				_tagsDelete({ tags_id: row.id });
			});
		};
		// 启用、禁用
		const onChangeStatus = (row: any) => {
			ElMessageBox.confirm(`是否确认${Number(row.status) == 1 ? '启用' : '禁用'}标签编号为${row.id}的数据项？`, '提示', { type: 'warning' })
				.then(() => {
					TagsApi.tagsEdit({
						...row,
						icon: row.icon.replace(import.meta.env.VITE_FILE_API, ''),
						tags_id: row.id,
						status: row.status,
					})
						.then(() => {
							ElMessage.success(`${Number(row.status) == 1 ? '启用' : '禁用'}成功`);
						})
						.catch(() => {
							row.status = row.status ? 0 : 1;
						});
				})
				.catch(() => {
					row.status = row.status ? 0 : 1;
				});
		};

		/********** 方法事件 **********/
		const getList = () => {
			state.loading = true;
			_tagsList(state.queryParams);
		};
		/******************************网络请求******************************/
		// 商品标签列表
		const _tagsList = (params: any) => {
			TagsApi.tagsList(params)
				.then((res: any) => {
					state.loading = false;
					state.tableList = res.data.list;
				})
				.catch(() => (state.loading = false));
		};
		// 商品标签删除
		const _tagsDelete = (params: any) => {
			TagsApi.tagsDelete(params)
				.then(() => {
					ElMessage.success('操作成功');
					getList();
				})
				.catch(() => {});
		};

		return {
			labelOperationDialogRef,
			onOperation,
			onDelete,
			onChangeStatus,
			getList,
			...toRefs(state),
		};
	},
};
</script>

<style lang="scss" scoped></style>
